<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #demo1 img{ width:100px; height: 100px; }
    </style>
</head>
<body>
    <div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
        <div id="demo1">
            <img src="https://oilimages.oss-cn-shenzhen.aliyuncs.com/newoil/sss.png">
            <img src="https://oilimages.oss-cn-shenzhen.aliyuncs.com/newoil/sm.png">
            <img src="https://oilimages.oss-cn-shenzhen.aliyuncs.com/newoil/oil2.png">
            <img src="https://oilimages.oss-cn-shenzhen.aliyuncs.com/newoil/oil1.png">
            <img src="https://oilimages.oss-cn-shenzhen.aliyuncs.com/newoil/btn.png">
        </div>
        <div id=demo2></div>
    </div>
    <script>
        var speed=30;//控制滚动的速度快慢
        demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
        function Marquee(){
            if(demo2.offsetTop-demo.scrollTop<=0)//当demo1与demo2的交界处滚动至demo顶端时
                demo.scrollTop-=demo1.offsetHeight;
            else{
                demo.scrollTop++;//demo向上滚动一个像素
            }
        }
        var MyMar=setInterval(Marquee,speed);//设置定时器
        demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
    </script>
    <p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>
</body>
</html>